import * as echarts from 'echarts'

class BarEchart {
    constructor(view, option) {
        this.chart = echarts.init(view, 'dark');
        this.color = option.Color;
        this.grid = option.Grid;
        // type 值由外部传递
        this.type = option.type || '';
        // 给最大值最小值一个默认值
        this.MAX = option.MAX || 100;
        this.MIN = option.MIN || 0;
    }
    setData(xAxisData, SeriesData) {
        // 删除了 UI 中用不到的 Echart 配置项
        var option = {
            backgroundColor: '#191a23',
            tooltip: {
                trigger: 'axis',
                backgroundColor: "#191a23",
                borderColor: "rgba(255, 255, 255, 0.1)",
                axisPointer: {
                    type: 'shadow'
                },
                formatter: (params) => {
                    // 使用模板语法，看起来更好看一些
                    // 使他对其到左侧，为了实际输出代码时，减少左侧的字符串（其实没啥用）
                    return `
${params[0].name}<br/>
<div class="ant-row w-100">
    <div class="ant-col ant-col-12 params-name">${this.type}</div> 
    <div class="ant-col ant-col-12 params-value">${params[0].value}%</div>
</div>`;
                }
            },
            grid: this.grid,
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 此处颜色改为实色，挡住最后一个分割中的虚线
                        color: 'rgba(80, 80, 80)',
                    },
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    color: 'rgba(255, 255, 255, 0.5)',
                    // 修改文字大小
                    fontSize: 12,
                    // 强制显示X轴所有标签
                    interval: 0
                },
                data: xAxisData,
            },
            yAxis: {
                type: 'value',
                min: this.MIN,
                max: this.MAX,
                // 设置分割间隔
                interval: 25,
                axisLabel: {
                    show: true,
                    // 修改文字大小
                    fontSize: 11,
                    color: 'rgba(255, 255, 255, 0.5)'
                },
                splitLine: {
                    show: true,
                    // 虚线
                    lineStyle: {
                        type: [2, 1],
                    }
                },
            },
            series: [{
                name: '排名',
                type: 'bar',
                // 修改柱状条宽度
                barWidth: '35%',
                data: SeriesData,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: this.color[0] },
                        { offset: 1, color: this.color[1] },
                    ])
                },
            }]
        };
        this.chart.setOption(option);
    }
    destroy() {
        // 修改了 注销方法
        this.chart.dispose();
    }
}
export default BarEchart